{extend name="public/base"/}
{block name="style"}
<style>
    .layui-table th{text-align:center;}
    .layui-table td{text-align:center;}
    .layui-form-select dd{text-align: left;}
</style>
{/block}
{block name="content"}
<form class="layui-form" action="{:url('save')}" method="post" lay-filter="group-form" id="group-form">
    {:token()}
    {if isset($group)}
    <input type="hidden" name="group.group_id" value="{$group.group_id}">
    {/if}
    <div class="layui-form-item">
        <div class="layui-col-xs3">
            <label class="layui-form-label">分组名称</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" placeholder="分组名称" name="group.group_name" {if isset($group)}value="{$group.group_name}"{/if} class="layui-input" />
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">权重</label>
            <div class="layui-input-block">
                <input type="number" autocomplete="off" placeholder="权重" name="group.sort" {if isset($group)}value="{$group.sort}"{/if} class="layui-input" />
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" placeholder="备注" name="group.remark" {if isset($group)}value="{$group.remark}"{/if}class="layui-input"/>
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="group.status" value="1" {if !isset($group) || (isset($group) && $group.status)}checked{/if} lay-skin="switch">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs12">
            <table class="layui-table" style="margin-top: 0px;">
                <thead>
                <tr>
                    <th width="7%">配置项</th>
                    <th width="10%">条件</th>
                    <th width="25%"><div class="text-left">值</div></th>
                    <th width="7%">是否可走</th>
                    <th><div class="text-left">指定渠道</div></th>
                    <th width="7%">下一条</th>
                    <th width="10%">备注</th>
                    <th width="13%">操作</th>
                </tr>
                </thead>
                <tbody>
                {if isset($group)}
                {foreach $group->rules as $rule}
                <tr class="data-rule-row">
                    <td>
                        <select name="rule.rule_type[]">
                            <option value="">请选择</option>
                            {foreach $rule_type as $k => $v}
                            <option {if $rule->getData('rule_type')==$k}selected{/if} value="{$k}">{$v}</option>
                            {/foreach}
                        </select>
                    </td>
                    <td>
                        <select name="rule.condition[]">
                            <option value="">请选择</option>
                            {foreach $condition_type as $k => $v}
                            <option {if $rule->getData('condition')==$k}selected{/if} value="{$k}">{$v}</option>
                            {/foreach}
                        </select>
                    </td>
                    <td><input type="text" value="{$rule.rule_value}" name="rule.rule_value[]" class="layui-input" /></td>
                    <td>
                        <select name="rule.is_include[]">
                            {foreach $channel_ins as $k => $v}
                            <option {if $rule->getData('is_include')==$k}selected{/if} value="{$k}">{$v}</option>
                            {/foreach}
                        </select>
                    </td>
                    <td>
                        <div class="channel-select"></div>
                        <span class="layui-hide channel-list">{$rule.channel|json_encode}</span>
                    </td>
                    <td>
                        <select name="rule.match_type[]">
                            {foreach $match_type as $k => $v}
                            <option {if $rule->getData('match_type')==$k}selected{/if} value="{$k}">{$v}</option>
                            {/foreach}
                        </select>
                    </td>
                    <td><input type="text" placeholder="备注" value="{$rule.remark}" name="rule.remark[]" class="layui-input"/></td>
                    <td>
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn layui-bg-blue rule-up layui-btn-sm"><i class="layui-icon layui-icon-up"></i></a>
                            <a class="layui-btn layui-btn rule-down layui-btn-sm"><i class="layui-icon layui-icon-down"></i></a>
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-rule-add">
                                <i class="layui-icon layui-icon-add-1"></i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm data-rule-remove">
                                <i class="layui-icon layui-icon-delete"></i>
                            </button>
                        </div>
                    </td>
                    <input type="hidden" name="rule.rule_id[]" value="{$rule.rule_id}">
                </tr>
                {/foreach}
                {/if}
                </tbody>
            </table>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs12 text-center">
            <button type="reset" class="layui-btn">重置</button>
            <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="group-form">保存</button>
        </div>
    </div>
</form>
<script type="text/html" id="data-rule-template">
    <tr class="data-rule-row">
        <td>
            <select name="rule.rule_type[]">
                <option value="">请选择</option>
                {foreach $rule_type as $k => $v}
                <option value="{$k}">{$v}</option>
                {/foreach}
            </select>
        </td>
        <td>
            <select name="rule.condition[]">
                <option value="">请选择</option>
                {foreach $condition_type as $k => $v}
                <option value="{$k}">{$v}</option>
                {/foreach}
            </select>
        </td>
        <td><input type="text" value="" name="rule.rule_value[]" class="layui-input" /></td>
        <td>
            <select name="rule.is_include[]">
                {foreach $channel_ins as $k => $v}
                <option value="{$k}">{$v}</option>
                {/foreach}
            </select>
        </td>
        <td>
            <div class="channel-select"></div>
        </td>
        <td>
            <select name="rule.match_type[]">
                {foreach $match_type as $k => $v}
                <option value="{$k}">{$v}</option>
                {/foreach}
            </select>
        </td>
        <td><input type="text" placeholder="备注" value="" name="rule.remark[]" class="layui-input"/></td>
        <td>
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn layui-bg-blue rule-up layui-btn-sm"><i class="layui-icon layui-icon-up"></i></a>
                <a class="layui-btn layui-btn rule-down layui-btn-sm"><i class="layui-icon layui-icon-down"></i></a>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-rule-add">
                    <i class="layui-icon layui-icon-add-1"></i>
                </button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm data-rule-remove">
                    <i class="layui-icon layui-icon-delete"></i>
                </button>
            </div>
        </td>
    </tr>
</script>
{/block}
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/js/jquery.serializejson.min.js"></script>
<script type="text/javascript">
    //一般直接写在一个js文件中
    layui.extend({
        xmSelect: 'xm-select'
    }).use(['layer', 'form', 'jquery', 'longli', 'xmSelect'], function()
    {
        var layer = layui.layer
            , form = layui.form
            , $ = layui.jquery;

        // 选择 sku
        $(".channel-select").each(function()
        {
            var defVal = JSON.parse($(this).parent().find(".channel-list").text());
            renderSearch(this, defVal);
        });

        // 自动添加报价单详情
        if($(".layui-table .data-rule-row").length < 1)
        {
            var html = $("#data-rule-template").html();
            $(".layui-table tbody").prepend(html);
            form.render();
            renderSearch($(".layui-table .channel-select:last").get(0));
        }
        // 添加行
        $(".layui-table").on("click", ".data-rule-add", function()
        {
            var html = $("#data-rule-template").html();
            $(".layui-table .data-rule-row:last").after(html);
            form.render();
            renderSearch($(".layui-table .channel-select:last").get(0));
        });

        // 删除行
        $(".layui-table").on("click", ".data-rule-remove",function()
        {
            if($(".layui-table .data-rule-row").length == 1)
            {
                layer.msg('只有一条不允许删除。', {time : 2000});
                return;
            }
            $(this).parent().parent().parent().remove();
        });

        // 上移
        $(document).on("click", ".rule-up", function()
        {
            var $curr = $(this).parents('tr')
                , $prev = $curr.prev();
            $curr.after($prev);
        });
        // 下移
        $(document).on("click", ".rule-down", function()
        {
            var $curr = $(this).parents('tr')
                , $next = $curr.next();
            $next.after($curr);
        });

        // 提交表单
        form.on("submit(group-form)", function (data)
        {
            var json = $("#group-form").serializeJSON();
            layui.longli.postJson('{:url("save")}', json, function(response)
            {
                var icon = response.code == 1 ? 6 : 5;
                layer.msg(response.msg, {icon: icon, time: 1500}, function()
                {
                    if(response.code == 1)
                    {
                        location.href = "{:url('index')}";
                    }
                });
            });
            return false;
        });

        /**
         * 渲染多选下拉框
         * @param node 需要渲染的节点
         * @param defVal 默认值
         */
        function renderSearch(node, defVal)
        {
            var xargs = {
                el: node,
                data: [],
                prop: {
                    name: 'channel_name',
                    value: 'channel_id',
                },
                name: 'rule.list_id[]',
                filterable: true,
                remoteSearch: true,
                on: function (data)
                {

                },
                remoteMethod: function (text, callback, show)
                {
                    text = text.trim();
                    $.get("{:url('cha/channel/channel_list')}", {channel_name: text}).done(function (response)
                    {
                        if (response.code != 1) return callback([]);
                        callback(response.data);
                    });
                }
            };
            if(defVal)
            {
                for(let i in defVal)
                {
                    xargs.data.push({channel_id: defVal[i].channel_id, channel_name: defVal[i].channel_name, selected: true});
                }
            }
            layui.xmSelect.render(xargs);
        }
    });
</script>
{/block}